<template>
  <div class="page-header">
    <h2 class="page-title">
      <el-icon class="title-icon"><Document /></el-icon>
      我的申请
    </h2>
    <el-button type="primary" @click="createNewApply">
      <el-icon><Plus /></el-icon>
      新建申请
    </el-button>
  </div>

  <!-- 搜索和筛选区域 -->
  <el-card class="search-card" shadow="hover">
    <el-form :model="searchForm" inline>
      <el-form-item label="申请类型">
        <el-select v-model="searchForm.type" placeholder="请选择申请类型" clearable>
          <el-option label="请假申请" value="leave" />
          <el-option label="出差申请" value="business" />
          <el-option label="报销申请" value="reimbursement" />
          <el-option label="公文发送" value="document" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option label="待审批" value="pending" />
          <el-option label="已通过" value="approved" />
          <el-option label="已拒绝" value="rejected" />
          <el-option label="已撤回" value="withdrawn" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button @click="resetSearch">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 申请列表 -->
  <el-card class="list-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>申请记录</span>
        <el-tag type="info">共 {{ totalCount }} 条记录</el-tag>
      </div>
    </template>

    <el-table :data="applyList" v-loading="loading" stripe>
      <el-table-column prop="id" label="申请编号" width="120" />
      <el-table-column prop="type" label="申请类型" width="120">
        <template #default="{ row }">
          <el-tag :type="getTypeTagType(row.type)">
            {{ getTypeLabel(row.type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="申请标题" min-width="200" />
      <el-table-column prop="createTime" label="申请时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="approver" label="审批人" width="120" />
      <el-table-column prop="approveTime" label="审批时间" width="180" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="viewDetail(row)">查看</el-button>
          <el-button
            v-if="row.status === 'pending'"
            type="warning"
            size="small"
            @click="withdrawApply(row)"
          >
            撤回
          </el-button>
          <el-button
            v-if="row.status === 'rejected'"
            type="success"
            size="small"
            @click="resubmitApply(row)"
          >
            重新提交
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <!-- 申请详情对话框 -->
  <el-dialog
    v-model="detailDialogVisible"
    title="申请详情"
    width="60%"
    :before-close="handleCloseDetail"
  >
    <div v-if="currentDetail" class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="申请编号">{{ currentDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="申请类型">
          {{ getTypeLabel(currentDetail.type) }}
        </el-descriptions-item>
        <el-descriptions-item label="申请标题">{{ currentDetail.title }}</el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag :type="getStatusTagType(currentDetail.status)">
            {{ getStatusLabel(currentDetail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ currentDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="审批人">{{ currentDetail.approver }}</el-descriptions-item>
        <el-descriptions-item label="审批时间">
          {{ currentDetail.approveTime }}
        </el-descriptions-item>
        <el-descriptions-item label="审批意见" :span="2">
          {{ currentDetail.comment || '无' }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="detail-description">
        <h4>申请详情：</h4>
        <p>{{ currentDetail.description }}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document, Plus, Search, Refresh } from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const totalCount = ref(0)
const detailDialogVisible = ref(false)
const currentDetail = ref<any>(null)

// 搜索表单
const searchForm = reactive({
  type: '',
  status: '',
  dateRange: [],
})

// 分页配置
const pagination = reactive({
  current: 1,
  size: 10,
})

// 申请列表数据
const applyList = ref([
  {
    id: 'AP202412001',
    type: 'leave',
    title: '年假申请',
    createTime: '2024-12-01 09:30:00',
    status: 'pending',
    approver: '张经理',
    approveTime: '',
    description: '申请年假5天，从2024年12月15日开始',
    comment: '',
  },
  {
    id: 'AP202412002',
    type: 'business',
    title: '出差申请',
    createTime: '2024-12-02 14:20:00',
    status: 'approved',
    approver: '李总监',
    approveTime: '2024-12-03 10:15:00',
    description: '前往上海参加技术交流会，预计3天',
    comment: '同意出差申请',
  },
  {
    id: 'AP202412003',
    type: 'reimbursement',
    title: '差旅费报销',
    createTime: '2024-12-03 16:45:00',
    status: 'rejected',
    approver: '王财务',
    approveTime: '2024-12-04 11:30:00',
    description: '报销差旅费共计2800元',
    comment: '发票不完整，请补充',
  },
])

// 获取申请类型标签
const getTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    leave: '请假申请',
    business: '出差申请',
    reimbursement: '报销申请',
    document: '公文发送',
  }
  return typeMap[type] || type
}

// 获取申请类型标签颜色
const getTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    leave: 'warning',
    business: 'primary',
    reimbursement: 'success',
    document: 'info',
  }
  return typeMap[type] || 'info'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已拒绝',
    withdrawn: '已撤回',
  }
  return statusMap[status] || status
}

// 获取状态标签颜色
const getStatusTagType = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    withdrawn: 'info',
  }
  return statusMap[status] || 'info'
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  loadApplyList()
}

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    type: '',
    status: '',
    dateRange: [],
  })
  pagination.current = 1
  loadApplyList()
}

// 加载申请列表
const loadApplyList = () => {
  loading.value = true
  // 模拟API调用
  setTimeout(() => {
    totalCount.value = applyList.value.length
    loading.value = false
  }, 500)
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.current = 1
  loadApplyList()
}

const handleCurrentChange = (current: number) => {
  pagination.current = current
  loadApplyList()
}

// 新建申请
const createNewApply = () => {
  ElMessage.info('跳转到新建申请页面')
}

// 查看详情
const viewDetail = (row: any) => {
  currentDetail.value = row
  detailDialogVisible.value = true
}

// 撤回申请
const withdrawApply = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定要撤回该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    // 模拟API调用
    row.status = 'withdrawn'
    ElMessage.success('申请已撤回')
  } catch {
    // 用户取消
  }
}

// 重新提交
const resubmitApply = (_row: any) => {
  ElMessage.info('跳转到重新提交页面')
}

// 关闭详情对话框
const handleCloseDetail = () => {
  detailDialogVisible.value = false
  currentDetail.value = null
}

// 初始化
onMounted(() => {
  loadApplyList()
})
</script>

<style scoped lang="less">
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .page-title {
    display: flex;
    align-items: center;
    margin: 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;

    .title-icon {
      margin-right: 8px;
      color: #409eff;
    }
  }
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;

  :deep(.el-form-item) {
    margin-bottom: 16px;
  }
}

.list-card {
  border-radius: 8px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.detail-content {
  .detail-description {
    margin-top: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 6px;

    h4 {
      margin: 0 0 12px 0;
      color: #303133;
      font-size: 16px;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .apply-container {
    padding: 10px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .page-title {
        font-size: 20px;
      }
    }

    .search-card {
      :deep(.el-form) {
        .el-form-item {
          display: block;
          margin-bottom: 12px;

          .el-form-item__label {
            display: block;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>
